<!-- Tbg Coa Template -->
<template>
  <el-dialog :visible.sync="dialogStatus"
             @closed="closeAfterDialog"
             width="500px">
    <div slot="title"
         style="fontSize:18px;textAlign:left;">
      Modify TBG COA
    </div>
    <el-form label-width="120px">
      <el-form-item label="TBG COA">
        <el-select v-model="selectedTbg"
                   filterable
                   default-first-option
                   :placeholder="$t('custom.accounting.selecttbgcoa')"
                   style="width:100%;">
          <el-option v-for="item in tbgLists"
                     :key="item.id"
                     :label="item.taap"
                     :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button size="small"
                 type="primary"
                 :loading="loadingSaveBtn"
                 @click="saveTbgCoaConfig">{{ $t('custom.accounting.saveBtn') }}</el-button>
      <el-button size="small"
                 @click="closeDialog">{{ $t('custom.accounting.cancelBtn') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      dialogStatus: false,
      selectedTbg: null,
      tbgLists: [],
      tbgRowInfo: null,
      loadingSaveBtn: false
    }
  },
  watch: {
    dialogStatus (val) {
      if (val) {
        this.getList()
      }
    }
  },
  methods: {
    getList () {
      this.$interface.accounting.getAccountingList()
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$message.error(res.msg)
          }
          this.tbgLists = res.data
          if (this.tbgRowInfo && this.tbgRowInfo.length && this.tbgRowInfo.length > 0) {
            this.selectedTbg = this.tbgRowInfo[0].taapId
          }
        })
    },
    saveTbgCoaConfig () {
      if (!this.selectedTbg) {
        this.$message.error(this.$t('custom.accounting.selecttbgcoa'))
        return false
      }
      this.loadingSaveBtn = true
      let accountIdList = []
      for (let i = 0; i < this.tbgRowInfo.length; i++) {
        accountIdList.push(this.tbgRowInfo[i].id)
      }
      const params = {}
      params.quickbooksAccountIdList = accountIdList
      params.taapId = this.selectedTbg
      params.taapValue = this.tbgLists.find(e => e.id === this.selectedTbg).taap
      this.$interface.accounting.updateAccountingTaap(params)
        .then(({ data: res }) => {
          this.loadingSaveBtn = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
          this.closeDialog()
          this.$emit('updateAccountingList')
        })
        .catch(() => { this.loadingSaveBtn = false })
    },
    openDialog (e) {
      this.tbgRowInfo = e
      this.dialogStatus = true
    },
    closeDialog () {
      this.dialogStatus = false
    },
    closeAfterDialog () {
      Object.assign(this.$data, this.$options.data())
    }
  }
}
</script>
